<template>
	<view>
		<u-navbar :autoBack="true" leftIconColor="#ffffff" title="个人信息" :placeholder="true" bgColor="#3ACD90"
			:titleStyle="{ color: '#FFFFFF', fontSize: '30rpx' }"></u-navbar>
		<view>
			<view class="flex-center" style="display: flex;;background-color:#FF6C2C;width: 100%;">
				<view>
					<u--image :showLoading="true" :src="src" width="80rpx" height="80rpx" @click="click"></u--image>
				</view>
				<view style="color:white">
					收款码
				</view>
			</view>
			
			<view class="mt20 pdlr30" style="background-color: #ffffff;">
				
				<view  class="pt20 flex-center " style="display: flex;justify-content: space-between;">
					
					<view class="flex-center" style="display: flex;">
						<view>经营数据</view>
						<view style="margin-left:20rpx;color:#666666;font-size: 24rpx;">截止到{{todayFormat}}</view>
						
					</view>
						

					<view class='text-green-color'>更多</view>
					
				</view>
				
				<view class="flex-center" style="margin-top:10rpx;display:flex;flex-direction: column;">
					<view>今日店铺积分</view>
					<view class="mt10">
						<u-count-to color="black" :startVal="30" endVal="4500.55" :decimals="2"></u-count-to>

					</view>
				</view>
				
				<view @click="infoopen" class="mt10" style="font-size:24rpx;display: flex;justify-content: space-between;">
					<view>
						今日等级奖励积分:{{ todayScore }}
					</view>
					<view class="flex-center" style="display: flex;">
						<view class='text-green-color'>统计范围</view>
						<view>
							<u-icon  name="question-circle" size="13" color="#3ACD90"></u-icon>

						</view>
					</view>
				</view>
				<view class="mt10">
					<view>
						<u-subsection activeColor="#FF6C2C" bgColor="#3ACD90" :list="yingyelist" :current="yingyecurrent" @change="yingyechange" :firstmoney="11.1" :secondmoney="22.2" :thirdmoney="33.3"></u-subsection>
					</view>
					<view class="yingyeblock" v-if="yingyecurrent === 0" >
						<view style="padding:14rpx;display: flex;justify-content: space-between;">
							<view>
								<view>店铺收款营业额</view>
								<view>0.0</view>
							</view>
							<view>
								<view>店铺收款退款</view>
								<view>0.0</view>
							</view>
						</view>
						
						<view style="padding:14rpx;display: flex;justify-content: space-between;">
							<view>
								<view>汇款订单营业额</view>
								<view>0.0</view>
							</view>
							<view>
								<view>汇款订单退款</view>
								<view>0.0</view>
							</view>
						</view>
					</view>
					<view class="yingyeblock" v-else-if="yingyecurrent === 1">
						<view style="padding:14rpx;display: flex;justify-content: space-between;">
							<view>
								<view>收款订单数</view>
								<view>0.0</view>
							</view>
							<view>
								<view>退款订单数</view>
								<view>0.0</view>
							</view>
						</view>
					</view>
					<view class="yingyeblock" v-else-if="yingyecurrent === 2" >
						<view style="padding:14rpx;display: flex;justify-content: space-between;">
							<view>
								<view>收款金额</view>
								<view>0.0</view>
							</view>
							<view>
								<view>退款金额</view>
								<view>0.0</view>
							</view>
						</view>
					</view>
				</view>
				<view class="mt10" style="font-size:24rpx;color:#666666;padding-bottom: 20rpx;">
					统计数据时间：今日0.00-当前
				</view>
			</view>
			
			<view class="mt20 pdlr30" style="background-color: #ffffff;">
				<view  class="pt20 flex-center " style="display: flex;justify-content: space-between;">
					<view>昨日数据</view>
				</view>
				
				<view style="color:#666666;font-size: 24rpx;">截止到{{todayFormat}}</view>
				
				
				<view class="mt10">
					<view>
						<u-subsection activeColor="#FF6C2C" bgColor="#3ACD90" :list="yingyelist" :current="yingyecurrent" @change="yingyechange" :firstmoney="11.1" :secondmoney="22.2" :thirdmoney="33.3"></u-subsection>
					</view>
					<view class="yingyeblock" v-if="yingyecurrent === 0" >
						<view style="padding:14rpx;display: flex;justify-content: space-between;">
							<view>
								<view>店铺收款营业额</view>
								<view>0.0</view>
							</view>
							<view>
								<view>店铺收款退款</view>
								<view>0.0</view>
							</view>
						</view>
						
						<view style="padding:14rpx;display: flex;justify-content: space-between;">
							<view>
								<view>汇款订单营业额</view>
								<view>0.0</view>
							</view>
							<view>
								<view>汇款订单退款</view>
								<view>0.0</view>
							</view>
						</view>
					</view>
					<view class="yingyeblock" v-else-if="yingyecurrent === 1">
						<view style="padding:14rpx;display: flex;justify-content: space-between;">
							<view>
								<view>收款订单数</view>
								<view>0.0</view>
							</view>
							<view>
								<view>退款订单数</view>
								<view>0.0</view>
							</view>
						</view>
					</view>
					<view class="yingyeblock" v-else-if="yingyecurrent === 2" >
						<view style="padding:14rpx;display: flex;justify-content: space-between;">
							<view>
								<view>收款金额</view>
								<view>0.0</view>
							</view>
							<view>
								<view>退款金额</view>
								<view>0.0</view>
							</view>
						</view>
					</view>
				</view>
				<view class="mt10" style="font-size:24rpx;color:#666666;padding-bottom: 20rpx;">
					统计数据时间：今日0.00-当前
				</view>
				
			</view>
			
			<view class="mt20 pdlr30" style="background-color: #ffffff;">
				<view class="pt20 ">累计抵用券：55555</view>
				<view style="display: flex;justify-content: space-between;padding-bottom: 20rpx;">
					<view class="mt20">
						<view class="diyongquan-title">可用抵用券</view>
						<view>111</view>
					</view>
					
					<view class="mt20">
						<view class="diyongquan-title">冻结抵用券</view>
						<view >111</view>
					</view>

					<view class="mt20">
						<view class="diyongquan-title">活动未生效</view>
						<view >111</view>
					</view>

					<view class="mt20">
						<view class="diyongquan-title">潮客可激活</view>
						<view >111</view>
					</view>
				</view>
			</view>
			
			<view class="mt20 pdlr30" style="background-color: #ffffff;padding-bottom: 20rpx;">
				<view class="pt20 ">积分：888888</view>

				<view style="display: flex;justify-content: space-between;">
					<view class="mt20">
						<view class="diyongquan-title">补贴积分</view>
						<view>888888</view>
					</view>
					
					<view class="mt20">
						<view class="diyongquan-title">会员积分</view>
						<view >888999</view>
					</view>
					
					<view class="mt20">
						<view class="diyongquan-title">潮客积分</view>
						<view>77777</view>
					</view>
					
				</view>
			</view>
			
			<view class="mt20 pdlr30 pt20" style="display: flex;align-items: center;;justify-content: space-between;;background-color: #ffffff;padding-bottom: 20rpx;">
				<view >参与活动</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>


			</view>
		</view>
		
		<u-popup :round="5" :closeable="true" mode="center"  :show="infoshow" @close="infoclose" @open="infoopen">
			<view style="width: 600rpx;">
				<view class="flex-center" style="display: flex;padding:20rpx">统计范围</view>
				<view class="vertical-divider"></view>
				
				<view style="padding:20rpx">
					<view style="font-size: 30rpx;">异业联盟</view>
					<view style="font-size: 24rpx;color:#666666">扫码订单、线下汇款、购房订单、品牌使用费、收款订单</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import dayjs from 'dayjs';
	
	export default {
		data() {
			return {
				todayScore:0.0,
				src:"/static/image/shoukuanma.png",
				infoshow: false,
				yingyelist: ['今日营业额(元)', '今日订单数(单)', '今日应收(元)'],
				yingyecurrent: 0,
				
				
				
			}
		},
		computed:{
			todayFormat(){
				return dayjs().format('YYYY年MM月DD日');
			}
		},
		onLoad(){
			
		},
		methods:{

			infoopen() {
				this.infoshow = true
			          // console.log('open');
			},
			infoclose() {
			  this.infoshow = false
			  // console.log('close');
			},
			yingyechange(e){
				this.yingyecurrent = e
				
			}
			
		}
	}
</script>

<style scoped>
	
	.vertical-divider {
		width: 100%;
		height: 2rpx;
		background-color: #D8D8D8;
	}
	.yingyeblock{
		/* background-color: #eeeeee; */
	}
	.diyongquan-title{
		color:#666666;
		font-size: 24rpx;
	}
	.vertical-divider {
	  width: 2rpx; 
	  height: 30rpx; 
	  background-color: #ccc; 
	  margin: 0 20rpx;
	}
</style>